<template>
  <div class="song-sheet">
    <div :style="{backgroundImage:'url('+img+')'}"></div>
    <span>{{ title }}</span>
    <span>{{ user }}</span>
  </div>
</template>

<script>
export default {
  name: "SongSheet",
  props: ["title", "user", "img"],
  /*data() {
    return {}
  },
  methods: {},
  computed: {},*/
  description: {
    // 模板
  }
}
</script>

<style scoped lang="less">
@import url("@/assets/less/1.less");

.song-sheet {
  width: 146px;
  height: 200px;
  /*border: 1px solid pink;*/
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;

  & > div :first-child {
    //display: none;
    width: 146px;
    height: 146px;
    background-color: @bc;
    background-repeat: no-repeat;
    background-size: 146px;
    border-radius: 32px;
    border: none;
    overflow: hidden;
    transition: all 300ms cubic-bezier(.02, .01, .47, 1);

    &:hover {
      // 阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色
      box-shadow: 0 0 30px rgba(48, 55, 66, .6);
      transform: translate(0, -7px);
      //transform: scale(1.1, 1.1);
      transition-delay: 0s;
    }
  }

  span:nth-child(2) {
    .text(9em);
    color: @ffc;
  }

  span:nth-child(3) {
    .text(9em);
    color: @fbc;
  }
}
</style>
